<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备类型管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="devicetypeQuery" inline>
        <el-form-item label="类型名称">
          <el-input v-model="devicetypeQuery.deviceTypeName"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select style="width: 100px" v-model="devicetypeQuery.isEnabled">
            <el-option :value="null" label="全部"/>
            <el-option :value="true" label="是"/>
            <el-option :value="false" label="否"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="loadTasks(0)" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button type="primary" @click="addTask" >新增</el-button>
        <el-button type="primary" @click="batchEditTask" >编辑</el-button>
        <el-button type="primary" @click="batchDeleteTask" >删除</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="deviceTypes" border stripe
                row-key="deviceTypeCode"
                lazy
                :load="loadChildrenTask"
                :tree-props="{ children: 'children', hasChildren: 'parent' }"
                ref="taskTable">
        <el-table-column prop="deviceTypeCode" label="设备类型编码"/>
        <el-table-column prop="deviceTypeName" label="设备类型名称"/>
        <el-table-column prop="enabled" label="是否启用">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.enabled == true">是</el-tag>
            <el-tag type="primary" v-else-if="scope.row.enabled == false">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link  style="margin: 0px 5px" type="primary" @click="addSonTask(scope.row)"><el-icon><Plus /></el-icon>新增</el-link>
            <el-link  style="margin: 0px 5px" type="primary" @click="openEditDialog(scope.row)"><el-icon><EditPen /></el-icon>编辑</el-link>
            <el-link  style="margin: 0px 5px" type="primary" @click="deleteTask(scope.row)"><el-icon><Delete /></el-icon>删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog
      title="新增任务"
      v-model="dialogVisible"
      width="50%"
      @close="resetForm">
    <el-form :model="deviceTypeForm" ref="taskFormRef" label-width="120px">
      <!-- 任务标题 -->
      <el-form-item label="设备类型编码" prop="deviceTypeCode" >
        <el-input v-model="deviceTypeForm.deviceTypeCode" placeholder="请输入设备编码"/>
      </el-form-item>

      <!-- 任务工期 -->
      <el-form-item label="设备类型名称" prop="deviceTypeName">
        <el-input v-model="deviceTypeForm.deviceTypeName" placeholder="请输入设备类型名称" />
      </el-form-item>


      <el-form-item label="启用状态" prop="isEnabled">
        <el-select v-model="deviceTypeForm.enabled" placeholder="请选择启用状态">
          <el-option label="正常" :value="true" />
          <el-option label="暂停" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="remarks">
        <el-input v-model="deviceTypeForm.remarks" type="textarea" placeholder="描述" />
      </el-form-item>

      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--编辑任务-->
  <el-dialog
      title="编辑任务"
      v-model="EditdialogVisible"
      width="50%"
      @close="resetForm">
    <el-form :model="deviceTypeForm" ref="taskFormRef" label-width="120px">
      <!-- 任务标题 -->
      <el-form-item label="设备类型编码" prop="deviceTypeCode" >
        <el-input v-model="deviceTypeForm.deviceTypeCode" placeholder="请输入设备编码"/>
      </el-form-item>

      <!-- 任务工期 -->
      <el-form-item label="设备类型名称" prop="deviceTypeName">
        <el-input v-model="deviceTypeForm.deviceTypeName" placeholder="请输入设备类型名称" />
      </el-form-item>


      <el-form-item label="启用状态" prop="isEnabled">
        <el-select v-model="deviceTypeForm.enabled" placeholder="请选择启用状态">
          <el-option label="正常" :value="true" />
          <el-option label="暂停" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="remarks">
        <el-input v-model="deviceTypeForm.remarks" type="textarea" placeholder="描述" />
      </el-form-item>

      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="EditsubmitForm">提交</el-button>
        <el-button @click="EditdialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";
import deviceRequest from "@/api/device.js";
let selectedTask = ref(({}));
let deciveTypeForm =ref({
  deviceTypeCode: '',
  deviceTypeName: '',
  isEnabled: 1, // 默认启用状态
  remarks: '',
  isParent: 0, // 默认不是父节点
  parentCode: '',
});
let deviceTypeForm = ref({});
let devicetypeQuery=ref({});
let EmptytaskQuery=ref({});
let startTimes=ref([]);
let endTimes = ref([]);
let selectedTaskId = ref([]);
let batchSelected = ref({});
let  taskDetailId = ref(-1);
const resetForm = () => {
  deviceTypeForm.value = {
    deviceTypeCode: '',
    deviceTypeName: '',
    isEnabled: '',
    remarks: '',
    isParent:'',
    parentCode:''
  };
};
const route = useRoute();
const taskTreeData = ref([]);
const columns = [
  { prop: 'task_id', label: '任务编号' },
  { prop: 'task_title', label: '任务标题' },
  { prop: 'task_desc', label: '任务描述' },
  { prop: 'start_time', label: '开始时间' },
  { prop: 'end_time', label: '结束时间' },
  { prop: 'task_duration', label: '工期' },
  { prop: 'task_progress', label: '进度' },
];
const project = ref({});
const users = ref({});
const deviceTypes = ref([]);

const curUserId = ref(-1);
const dialogVisible = ref(false);
const EditdialogVisible = ref(false);
const editTask = ref({});
const defaultProps = {
  children: 'children',
  label: 'task_title',
};

const isBatchEdit = ref(false);
const openEditDialog = (row) => {
  deviceTypeForm.value=row;
  console.log(deviceTypeForm.value);
  EditdialogVisible.value = true;

};

const handleDialogClose = () => {
  // 在这里可以处理关闭弹窗时的逻辑
};
const deleteTask = (row) =>{


  console.log(row.deviceTypeCode);
  ElMessageBox.confirm(
      '您确定要将任务删除吗？',
      '提示',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(()=>{

    if(!row.parent){
        deviceRequest.deleteDeviceType(row.deviceTypeCode,res=>{
          loadTasks(0);
          window.location.reload();
        })
    }else {
      ElMessage({
        type:"warning",
        message:"您选中的项目包含子项目，请先删除子项目"
      });
      return;
    }
  })
};
const submitEditForm = () => {

};
onMounted(() => {
  loadTasks(0);
});

function EditsubmitForm(){
  deviceRequest.editDeviceType(deviceTypeForm.value,res=>{
    loadTasks(0);
    EditdialogVisible.value = false;
    resetForm();
  })
}
function submitForm(){
  if(selectedTask.value!=null){
    deviceRequest.addSonDeviceType(deviceTypeForm.value,selectedTask.value.deviceTypeCode,res=>{
      loadTasks(0);
      dialogVisible.value=false;
    })
  }else {
    deviceRequest.addDeviceTypeForm(deviceTypeForm.value,ref=>{
      loadTasks(0);
      resetForm();
      dialogVisible.value = false;
    });
  }


}
function handleSelectionChange(val){
}
function addSonTask(select){
  selectedTask.value=select;
  console.log("选中的数据",selectedTask.value);
  dialogVisible.value= true;

}
function loadUser(UserId){

}
function loadProject(projectId) {

}
function  addTask(){
  dialogVisible.value = true;
  console.log(dialogVisible.value);
}
function batchDeleteTask() {
}
function batchEditTask(){
  isBatchEdit.value=true;
  editTask.value={};
  EditdialogVisible.value = true;

}
function loadTasks(parentId) {
    deviceRequest.loadDeviceTypes(devicetypeQuery.value,parentId,1,10,res=>{
     deviceTypes.value = res.data;
     console.log(deviceTypes);
    })
}
function loadChildrenTask(deviceType,node,resole){
    console.log(deviceType.deviceTypeCode);
    console.log(node);
  deviceRequest.loadDeviceTypes(devicetypeQuery.value,deviceType.deviceTypeCode,1,10,res=>{
    resole(res.data);
  })

}
function showDetail(task) {

}
</script>
